<template>
	<div class="body">
		<view class="rectangle" v-if="earnings">
			<div>
				<div class="title">  <image mode="heightFix" src="../../static/help/收益问题@3x.png"></image> 收益问题 </div>
			</div>
			<hr style="color:azure; color: #ccc; width: 80%; margin-left: 40px;" />
			<div v-for="earningss in earnings">
				<div class="hou2" @click="clisc(earningss)"> {{ earningss.title }} </div>
			</div>
		</view>

    <view class="rectangle" v-if="popularize.length > 0">
      <div>
        <div class="title">  <image mode="heightFix" src="../../static/help/推广问题@3x.png"></image> 推广问题 </div>
      </div>
      <hr style="color:azure; color: #ccc; width: 80%; margin-left: 40px;" />
      <div v-for="popularizes in popularize">
        <div class="hou2"  @click="clisc(popularizes)" > {{ popularizes.title }} </div>
      </div>
    </view>

    <view class="rectangle" v-if="grade.length > 0">
      <div>
        <div class="title">  <image mode="heightFix" src="../../static/help/等级问题@3x.png"></image> 等级问题 </div>
      </div>
      <hr style="color:azure; color: #ccc; width: 80%; margin-left: 40px;" />
      <div v-for="grades in grade">
        <div class="hou2" @click="clisc(grades)"> {{ grades.title }} </div>
      </div>
    </view>

    <view class="rectangle" v-if="activity.length > 0">
      <div>
        <div class="title">  <image mode="heightFix" src="../../static/help/活动问题@3x.png"></image> 活动问题 </div>
      </div>
      <hr style="color:azure; color: #ccc; width: 80%; margin-left: 40px;" />
      <div v-for="activitys in activity">
        <div class="hou2" @click="clisc(activitys)"> {{ activitys.title }} </div>
      </div>
    </view>

    <view>
      <uni-popup ref="popup" type="center" background-color="rgba(0,0,0,0)">
        <div class="pop">
          <div class="text1">
            <div class="h1">
              {{ help.title }}
            </div>
            <div class="h2">
              {{ help.body }}
            </div>
          </div>
        </div>
      </uni-popup>
    </view>
	</div>
</template>

<script>
import Api from "../../API/api";
	export default {
		data() {
			return {
        earnings: [],  //"收益问题"
        popularize:[], //"推广问题"
        grade:[],   //"等级问题"
        activity:[], //"活动问题"
        tst:[],
        help:{}
			}
		},
    onLoad(){
      Api.getListHelp().then(res=>{
        res.data.forEach(x=>{
          switch (x.kind.value) {
            case "GRADE" :
              this.grade.push(x)
              break;
            case "POPULARIZE" :
              this.popularize.push(x)
              break;
            case "EARNINGS" :
              this.earnings.push(x)
              break;
            case "ACTIVITY" :
              this.activity.push(x)
              break;
          }
        })
      })
    },
		methods: {
      clisc(value){
        this.help = value;
        this.$refs.popup.open()
      }
		},
	}
</script>


<style lang="less" scoped>
  .pop{
    background-color: #FFFFFF;
    width: 650rpx;
    height: 700rpx;
    //margin-bottom: 200rpx;
    border-radius: 50rpx;
      img{
        width: 100%;
      }
    .text1{
      text-align: center;
      .h1{
        margin-right: 50rpx;
        margin-left: 50rpx;
        padding-top: 20px;
        font-size: 40rpx;
        font-weight: bold;
        color: #000000;
        word-wrap: break-word;
        //margin-top: 100rpx;
      }
      .h2{
        padding-top: 20px;
        margin-top: 10rpx;
        font-size: 30rpx;
        color: #000000;
        color: #ccc;
        margin-right: 50rpx;
        margin-left: 50rpx;
        word-wrap: break-word;
        text-align: left;
      }
    }

    .btns {
      width: 520rpx;
      height: 96rpx;
      background: linear-gradient(180deg, #FFBD57 0%, #FD9509 100%);
      border-radius: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      position: relative;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      color: #FFFFFF;
    }

  }

	.btn {
		width: 520rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #FFBD57 0%, #FD9509 100%);
		border-radius: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 300rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
	}
	.rectangle {
		width: 90%;
		box-sizing: border-box;
		margin: 30rpx auto;
		background: #FFFFFF;
		border-radius: 30rpx;

		.title {
			padding: 30rpx;
      font-weight: bold;
      margin-left: 30rpx;
			font-size: 35rpx;
      image{
        padding-right: 15rpx;
        position: relative;
        top: 7px;
        height: 60rpx;
      }
		}
		.hou2 {
			color: #aaa;
			font-size: 14px;
			line-height: 40px;
			margin-left: 80rpx;
		}

	}
</style>